<template>
  <div class="manager-container">
    <div class="manager-header">
      <div class="manager-header-left">
        <img src="@/assets/imgs/logo.png" alt="图标" class="tubiao" />
        <div class="title">计算机学院推免系统</div>
      </div>
      <div class="manager-header-center">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/manager/home' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{
            router.currentRoute.value.meta.name
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="manager-header-right">
        <el-dropdown style="cursor: pointer">
          <div style="padding-right: 20px; display: flex; align-items: center">
            <img
              style="width: 40px; height: 40px; border-radius: 50%"
              :src="data.user.avatar"
              alt=""
            />
            <span style="margin-left: 5px; color: white">
              {{ data.user.name }}
              (<span v-if="data.user.role === 'STUDENT'">学生</span>
              <span v-if="data.user.role === 'SCIENCE_ADMIN'"
                >研究生院管理员</span
              >
              <span v-if="data.user.role === 'COLLEGE_ADMIN'">学院管理员</span>
              <span v-if="data.user.role === 'SUPER_ADMIN'">超级管理员</span
              >) </span
            ><el-icon color="#fff"><arrow-down /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleClick()"
                >个人资料</el-dropdown-item
              >
              <el-dropdown-item @click="router.push('/manager/password')"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 下面部分开始 -->
    <div style="display: flex">
      <div class="manager-main-left">
        <el-menu
          :default-active="router.currentRoute.value.path"
          :default-openeds="['1', '2', '3', '4']"
          router
        >
          <!--          系统首页都可以看-->
          <el-menu-item index="/manager/home">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <!--          反馈信息只有超级管理员不能看-->
          <el-menu-item index="/manager/feedback">
            <el-icon><ChatLineSquare /></el-icon>
            <span>反馈和举报信息</span>
          </el-menu-item>
          <el-menu-item index="/manager/approval">
            <el-icon><Check /></el-icon>
            <span>审批申请</span>
          </el-menu-item>
          <!--          班级信息只有学院管理员和研究生院管理员能看-->
          <el-menu-item index="/manager/classInfo">
            <el-icon><Grid /></el-icon>
            <span>班级信息</span>
          </el-menu-item>

          <!--          系统管理只有-->
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Tools /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/manager/classInfo">班级信息</el-menu-item>
            <el-menu-item index="/manager/notice">系统公告</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/manager/apply">
            <el-icon><Promotion /></el-icon>
            <span>推免申请</span>
          </el-menu-item>
          <el-menu-item index="/manager/find">
            <el-icon><StarFilled /></el-icon>
            <span>申请状态</span>
          </el-menu-item>
          <el-menu-item index="/manager/induction">
            <el-icon><Histogram /></el-icon>
            <span>名单确认</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/student">学生信息</el-menu-item>
            <el-menu-item index="/manager/college">学院管理员信息</el-menu-item>
            <el-menu-item index="/manager/science"
              >研究生院管理员信息</el-menu-item
            >
            <el-menu-item index="/manager/super">超级管理员信息</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><opportunity /></el-icon>
              <span>指标管理</span>
            </template>
            <el-menu-item index="/manager/metrics">指标信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="manager-main-right">
        <a-scrollbar type="track" style="height: 100vh">
          <RouterView @updateUser="updateUser" />
          <!-- <el-backtop
            target=".page-component__scroll .el-scrollbar__wrap"
          ></el-backtop> -->
        </a-scrollbar>
        <!-- <RouterView @updateUser="updateUser" /> -->
      </div>
    </div>
    <!-- 下面部分结束 -->
  </div>
  <a-drawer
    :width="500"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
  >
    <template #title>{{ data.user.name }}</template>
    <Userdata />
  </a-drawer>
  <!-- <Userdata /> -->
</template>

<script setup>
import { reactive, ref } from "vue";
import router from "@/router/index.js";
import { ElMessage } from "element-plus";
import Userdata from "@/views/manager/Person.vue";

//监听每个组件的变化并修改对应的user的属性
let showdata = ref(false);
const data = reactive({
  user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
});
// let a=localStorage.getItem('xm-user') || '{}';
// console.log(a);
const logout = () => {
  localStorage.removeItem("xm-user");
  router.push("/login");
};

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem("xm-user") || "{}");
};

if (!data.user.id) {
  logout();
  ElMessage.error("请登录！");
}
function gouserdata() {
  showdata.value = true;
}
const visible = ref(false);

const handleClick = () => {
  visible.value = true;
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};
</script>

<style scoped>
@import "@/assets/css/manager.css";
</style>
